<script lang="ts" setup>
// query id
import {useRoute} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import { requestSingerDesc } from "../../../utils/axiosURL"

const route = useRoute()
const SingerQueryID = ref<any>(route.query.id)
// 歌手详情
let singerIntroduce = reactive<any>([])

onMounted(() => {
  requestSingerDescFn()
})

const requestSingerDescFn = () => {
  requestSingerDesc(SingerQueryID.value).then((data: any) => {
    singerIntroduce.values = data.introduction
  }).catch(_ => { })
}
</script>

<template>
  <div class="singerIntroduceWrap">
    <div class="introduceItem" v-for="item in singerIntroduce.values">
      <p class="title">{{ item.ti }}</p>
      <p class="copyWriter">
        {{ item.txt }}
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.singerIntroduceWrap {
  width: 100%;
  padding: 0 30px;
  margin-top: 30px;
  box-sizing: border-box;

  .introduceItem {
    font-family: $activeTextFont;
    margin-bottom: 50px;
  }

  .copyWriter {
    text-indent: 2em;
    line-height: 24px;
    font-size: $font-size-sm;
    font-family: $textFont;
    color: $font_second_color;
  }
}
</style>
